import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../../tools/tools.dart';
import '../webview/webview_page.dart';
import 'components/sws_checkbox.dart';
import 'components/sws_textfield.dart';
import 'login_serve.dart';

/// 登陆页面
class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  LoginPageState createState() => LoginPageState();
}

class LoginPageState extends State<LoginPage> {
  // 手机号
  final TextEditingController phoneController =
      TextEditingController(text: "15223511204");

  LoginServe loginServe = LoginServe();

  @override
  void initState() {
    // FPrint('adsfasd$getScreenWidth');

    super.initState();
  }

  @override
  void dispose() {
    phoneController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Container(
            width: getScreenWidth,
            height: getScreenHeight,
            alignment: Alignment.topCenter,
            decoration: const BoxDecoration(color: Colors.white),
            child: Image.asset(
              'images/imgs/login-banner.png',
              fit: BoxFit.cover,
              width: getScreenWidth,
              height: rpx(640),
            ),
          ),
          Positioned(
            top: rpx(100),
            left: rpx(10),
            child: IconButton(
              onPressed: () {
                // FPrint('点击返回');
                Get.back();
              },
              icon: const Icon(Icons.dangerous_outlined),
              color: Colors.white,
            ),
          ),
          Positioned(
            top: rpx(610),
            left: rpx(0),
            width: getScreenWidth,
            child: Container(
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.vertical(
                  top: Radius.circular(
                    rpx(40),
                  ),
                ),
              ),
              child: Column(
                children: [
                  chengType(),
                  Obx(
                    () => AnimatedSwitcher(
                        duration: const Duration(milliseconds: 200),
                        transitionBuilder:
                            (Widget child, Animation<double> animation) {
                          //执行缩放动画
                          return ScaleTransition(
                              scale: animation, child: child);
                        },
                        child: loginServe.chengIndex.value == 0
                            ? buildCode() //验证码登录
                            : Divider(
                                height: rpx(100),
                                thickness: rpx(20),
                                color: Colors.red,
                              )),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  // 验证码登录
  Widget buildCode() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          key: ValueKey<int>(loginServe.chengIndex.value),
          margin: EdgeInsets.only(
            left: rpx(50),
            right: rpx(50),
            top: rpx(50),
            bottom: rpx(20),
          ),
          height: rpx(90),
          decoration: BoxDecoration(
            color: const Color(0xFFf8f8f8),
            borderRadius: BorderRadius.circular(
              rpx(10),
            ),
          ),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                padding: EdgeInsets.symmetric(horizontal: rpx(20)),
                child: const Text('+86'),
              ),
              Container(
                height: rpx(50),
                decoration: BoxDecoration(
                  border: Border(
                    left: BorderSide(width: rpx(1), color: SzColor.c9),
                  ),
                ),
                child: null,
              ),
              // 输入框
              SizedBox(
                width: rpx(500),
                height: rpx(90),
                child: SWSTextField(
                  controller: phoneController,
                  fillColor: const Color(0xFFf8f8f8),
                ),
              ),
            ],
          ),
        ),
        Padding(
          padding: EdgeInsets.only(
            left: rpx(50),
          ),
          child: Text(
            '未注册的手机号验证后自动创建首筑账号',
            style: TextStyle(
              color: SzColor.c9,
              fontSize: setSp(24),
            ),
          ),
        ),
        Container(
          margin: EdgeInsets.only(top: rpx(60)),
          width: rpx(750),
          height: rpx(120),
          alignment: Alignment.center,
          decoration: const BoxDecoration(color: Colors.white),
          child: ElevatedButton(
            style: ButtonStyle(
              backgroundColor:
                  MaterialStateProperty.all(SzColor.primary), //背景颜色
              foregroundColor: MaterialStateProperty.all(Colors.white), //文字颜色
              shape: MaterialStateProperty.all(
                //圆角
                RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(
                    rpx(10),
                  ),
                ),
              ),
              fixedSize: MaterialStateProperty.all(
                //大小
                Size(rpx(660), rpx(80)),
              ),
            ),
            onPressed: () {
              getCode();
            },
            child: const Text("获取验证码"),
          ),
        ),
        Padding(
          padding: EdgeInsets.only(
            left: rpx(30),
            top: rpx(50),
            right: rpx(30),
          ),
          child: buildXy(context),
        )
      ],
    );
  }

// 《用户协议》《隐私政策》
  Widget buildXy(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Obx(
          () => SWSCheckBox(
            value: loginServe.isAgree,
            onChanged: (value) {
              loginServe.isAgree = value!;
            },
          ),
        ),
        // 协议内容
        xyOne(context),
      ],
    );
  }

// 协议内容
  RichText xyOne(BuildContext context) {
    return RichText(
      text: TextSpan(
          text: '我已阅读并同意',
          style: const TextStyle(color: Colors.black),
          children: [
            TextSpan(
              text: '《用户协议》',
              style: const TextStyle(color: SzColor.primary),
              recognizer: TapGestureRecognizer()
                ..onTap = () {
                  // FPrint('《用户协议》');
                  Navigator.of(context).pushNamed(
                    'WebViewPage',
                    arguments: {
                      'config': WebConfig(
                        url: 'http://api.im.cqyicongkeji.com/agreement.html',
                        title: "用户协议",
                      )
                    },
                  );
                },
            ),
            const TextSpan(
              text: '和',
            ),
            TextSpan(
              text: '《隐私政策》',
              style: const TextStyle(color: SzColor.primary),
              recognizer: TapGestureRecognizer()
                ..onTap = () {
                  // YPrint('《隐私政策》');
                  Navigator.of(context).pushNamed(
                    'WebViewPage',
                    arguments: {
                      'config': WebConfig(
                        url: 'http://api.im.cqyicongkeji.com/privacy_ants.html',
                        title: "隐私政策",
                      )
                    },
                  );
                },
            ),
          ]),
    );
  }

// 切换类型
  Widget chengType() {
    return Obx(
      () => Row(
        children: [
          InkWell(
            onTap: () {
              loginServe.chengIndex(0);
            },
            child: Container(
              margin: EdgeInsets.only(left: rpx(50), top: rpx(20)),
              decoration: BoxDecoration(
                color: Colors.white,
                border: Border(
                  bottom: BorderSide(
                    width: rpx(8),
                    color: loginServe.chengIndex.value == 0
                        ? const Color(0xFFcadbf4)
                        : const Color(0xFFffffff),
                  ),
                ),
              ),
              child: Text(
                '验证码登陆',
                style: TextStyle(
                  fontSize: setSp(32),
                  color: Colors.black,
                ),
              ),
            ),
          ),
          InkWell(
            onTap: () {
              loginServe.chengIndex(1);
            },
            child: Container(
              margin: EdgeInsets.only(left: rpx(50), top: rpx(20)),
              decoration: BoxDecoration(
                color: Colors.white,
                border: Border(
                  bottom: BorderSide(
                    width: rpx(8),
                    color: loginServe.chengIndex.value == 1
                        ? const Color(0xFFcadbf4)
                        : const Color(0xFFffffff),
                  ),
                ),
              ),
              child: Text(
                '密码登陆',
                style: TextStyle(
                  fontSize: rpx(32),
                  color: Colors.black,
                ),
              ),
            ),
          )
        ],
      ),
    );
  }

  getCode() {
    var phone = phoneController.text;
    // FPrint(isPhone(phone));
    if (!(isPhone(phone))) {
      return SzEasyLoading.showToast('请输入正确手机号');
    }
    // 同意协议
    if (!loginServe.isAgree) {
      agreeFun();
    } else {
      Get.toNamed('login/code', arguments: {
        'phone': phoneController.text,
      });
    }
  }

  // 同意协议框
  agreeFun() {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return Center(
          child: Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(
                rpx(20),
              ),
            ),
            width: rpx(500),
            height: rpx(320),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                SizedBox(
                  height: rpx(20),
                ),
                Center(
                  child: Text(
                    '阅读并同意以下协议',
                    style: TextStyle(
                        fontWeight: FontWeight.bold, fontSize: setSp(36)),
                  ),
                ),
                Expanded(
                  child: Padding(
                    padding: EdgeInsets.only(
                      top: rpx(30),
                      left: rpx(30),
                      right: rpx(30),
                    ),
                    child: xyOne(context),
                  ),
                ),
                Container(
                  height: rpx(100),
                  decoration: BoxDecoration(
                    border: Border(
                      top: BorderSide(width: rpx(2), color: SzColor.e9e9e9),
                    ),
                    borderRadius: BorderRadius.only(
                      bottomLeft: Radius.circular(rpx(20)),
                      bottomRight: Radius.circular(rpx(20)),
                    ),
                  ),
                  child: Row(
                    children: [
                      Expanded(
                        flex: 1,
                        child: cancelTextButtn(
                          context,
                          title: '不同意',
                          height: 100,
                        ),
                      ),
                      Container(
                        decoration: BoxDecoration(
                          border: Border(
                            left: BorderSide(
                                width: rpx(2), color: SzColor.e9e9e9),
                          ),
                        ),
                      ),
                      // 确定按钮
                      Expanded(
                        flex: 1,
                        child: confirmTextButtn(
                          height: 100,
                          confirmFun: () {
                            Navigator.of(context).pop();
                            FPrint(phoneController.text);
                            // Get.pushNamed();
                            Get.toNamed('login/code', arguments: {
                              'phone': phoneController.text,
                            });
                          },
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}
